<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js流程控制</title>
</head>
<body>
    <div id="did" style="color: blueviolet; font-size: 20px;">
        hello wolrd !
    </div>
    <div>
        您喜欢的水果是：<input type="text" id="myInput" value="Banana">
    </div>
    <script>
        // if 的使用 
        // 获取当前的小时
        var hour = new Date().getHours();
        if(hour > 9)
            // 获取页面上的元素（后面会讲，大家先用）
            var oDiv = document.getElementById("did");
            // 修改div上面的内容
            oDiv.innerHTML = "现在是早上";

        // 写一个换行符号
        document.write("<br>");
        
        // switch的使用
        // 根据文本框中输入的水果来弹不同的提示框
        var text;
        // 获取页面上的输入框这个元素
        var oInput = document.getElementById("myInput");
        // 获取输入框里的值
        var fruit  = oInput.value;
        switch(fruit){
            case "Banana":
               text = "香蕉很好吃"
                break;
            case "Apple":
                text = "苹果很好吃";
                break;
            case "Orange":
                text = "橙子很好吃";
                break;
            default:
                text = "我不认识这个水果";
                break;
        }
        // 统一做一个输出
        alert(text);
        document.write("<br>");

        // for循环的使用
        var text = "";
        var sum = 0;
        for(var i = 1;i<6;i++){
            // 拼接一下text用来输出
            sum +=i;
            text += "这是第"+i+"次循环，得到的累加和为："+sum+"<br>";
        }
        document.write(text);
        document.write("<br>");

        // while循环的使用
        var text = "";
        var i = 10;
        while(i>5){
            text += "这是第"+i+"次循环<br>";
            i--;
        }
        document.write(text);
        
    </script>
</body>
</html>